<html>
<head>
<title>day10-作业-飞机大战.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #a9b7c6;}
.s1 { color: #faa23d;}
.s2 { color: #52cb54;}
.s3 { color: #e2da90;}
.s4 { color: #bbb529;}
.s5 { color: #db7e9b;}
.s6 { color: #b3e54c;}
.s7 { color: #aa7dfc;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
day10-作业-飞机大战.ets</font>
</center></td></tr></table>
<pre><span class="s0">export interface iDatum </span><span class="s1">{</span>
  <span class="s2">/** 
   * 评论内容 
   */</span>
  <span class="s0">content</span><span class="s3">: </span><span class="s0">string</span><span class="s3">;</span>

  <span class="s2">/** 
   * 评论id 
   */</span>
  <span class="s0">id</span><span class="s3">: </span><span class="s0">number</span><span class="s3">;</span>

  <span class="s2">/** 
   * 评论时间 
   */</span>
  <span class="s0">time</span><span class="s3">: </span><span class="s0">string</span><span class="s3">;</span>

  <span class="s2">/** 
   * 评论者姓名 
   */</span>
  <span class="s0">username</span><span class="s3">: </span><span class="s0">string</span><span class="s3">;</span>
  <span class="s0">agreeCount</span><span class="s3">: </span><span class="s0">number</span><span class="s3">; </span><span class="s2">// 支持人数</span>
  <span class="s0">isagreed</span><span class="s3">: </span><span class="s0">boolean</span><span class="s3">; </span><span class="s2">// 是否已经支持</span>
<span class="s1">}</span>


<span class="s4">@</span><span class="s0">Entry</span>
<span class="s4">@</span><span class="s0">Component</span>
<span class="s0">struct Index </span><span class="s1">{</span>
  <span class="s4">@</span><span class="s0">State list</span><span class="s3">: </span><span class="s0">iDatum</span><span class="s5">[] </span><span class="s3">= </span><span class="s5">[</span>
    <span class="s1">{</span>
      <span class="s0">id</span><span class="s3">: </span><span class="s6">1</span><span class="s3">,</span>
      <span class="s0">username</span><span class="s3">: </span><span class="s7">&quot;阿三&quot;</span><span class="s3">,</span>
      <span class="s0">content</span><span class="s3">: </span><span class="s7">&quot;已经用上了，很舒服&quot;</span><span class="s3">,</span>
      <span class="s0">time</span><span class="s3">: </span><span class="s7">&quot;2024-03-19&quot;</span><span class="s3">,</span>
      <span class="s0">agreeCount</span><span class="s3">: </span><span class="s6">14</span><span class="s3">,</span>
      <span class="s0">isagreed</span><span class="s3">: </span><span class="s0">false</span><span class="s3">,</span>
    <span class="s1">}</span><span class="s3">,</span>
    <span class="s1">{</span>
      <span class="s0">id</span><span class="s3">: </span><span class="s6">2</span><span class="s3">,</span>
      <span class="s0">username</span><span class="s3">: </span><span class="s7">&quot;YY&quot;</span><span class="s3">,</span>
      <span class="s0">content</span><span class="s3">: </span><span class="s7">&quot;小爱同学：这太难了&quot;</span><span class="s3">,</span>
      <span class="s0">time</span><span class="s3">: </span><span class="s7">&quot;2024-03-18&quot;</span><span class="s3">,</span>
      <span class="s0">agreeCount</span><span class="s3">: </span><span class="s6">14</span><span class="s3">,</span>
      <span class="s0">isagreed</span><span class="s3">: </span><span class="s0">true</span><span class="s3">,</span>
    <span class="s1">}</span><span class="s3">,</span>
    <span class="s1">{</span>
      <span class="s0">id</span><span class="s3">: </span><span class="s6">3</span><span class="s3">,</span>
      <span class="s0">username</span><span class="s3">: </span><span class="s7">&quot;风陵渡客&quot;</span><span class="s3">,</span>
      <span class="s0">content</span><span class="s3">: </span><span class="s7">&quot;我不做了&quot;</span><span class="s3">,</span>
      <span class="s0">time</span><span class="s3">: </span><span class="s7">&quot;2024-03-17&quot;</span><span class="s3">,</span>
      <span class="s0">agreeCount</span><span class="s3">: </span><span class="s6">10</span><span class="s3">,</span>
      <span class="s0">isagreed</span><span class="s3">: </span><span class="s0">false</span><span class="s3">,</span>
    <span class="s1">}</span><span class="s3">,</span>
    <span class="s1">{</span>
      <span class="s0">id</span><span class="s3">: </span><span class="s6">4</span><span class="s3">,</span>
      <span class="s0">username</span><span class="s3">: </span><span class="s7">&quot;国足不如你&quot;</span><span class="s3">,</span>
      <span class="s0">content</span><span class="s3">: </span><span class="s7">&quot;什么时候可以接入12306呢&quot;</span><span class="s3">,</span>
      <span class="s0">time</span><span class="s3">: </span><span class="s7">&quot;2024-03-12&quot;</span><span class="s3">,</span>
      <span class="s0">agreeCount</span><span class="s3">: </span><span class="s6">140</span><span class="s3">,</span>
      <span class="s0">isagreed</span><span class="s3">: </span><span class="s0">true</span><span class="s3">,</span>
    <span class="s1">}</span><span class="s3">,</span>
    <span class="s1">{</span>
      <span class="s0">id</span><span class="s3">: </span><span class="s6">5</span><span class="s3">,</span>
      <span class="s0">username</span><span class="s3">: </span><span class="s7">&quot;春去春又来&quot;</span><span class="s3">,</span>
      <span class="s0">content</span><span class="s3">: </span><span class="s7">&quot;华为是一家积极向上的企业&quot;</span><span class="s3">,</span>
      <span class="s0">time</span><span class="s3">: </span><span class="s7">&quot;2024-03-10&quot;</span><span class="s3">,</span>
      <span class="s0">agreeCount</span><span class="s3">: </span><span class="s6">100</span><span class="s3">,</span>
      <span class="s0">isagreed</span><span class="s3">: </span><span class="s0">false</span><span class="s3">,</span>
    <span class="s1">}</span><span class="s5">] </span><span class="s2">// 获取服务器评论数据</span>

  <span class="s0">build</span><span class="s5">() </span><span class="s1">{</span>

    <span class="s0">Column</span><span class="s5">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s6">10 </span><span class="s1">}</span><span class="s5">) </span><span class="s1">{</span>
      <span class="s0">Text</span><span class="s5">(</span><span class="s7">'评论列表'</span><span class="s5">)</span>
        <span class="s3">.</span><span class="s0">fontSize</span><span class="s5">(</span><span class="s6">20</span><span class="s5">)</span>
        <span class="s3">.</span><span class="s0">fontWeight</span><span class="s5">(</span><span class="s6">600</span><span class="s5">)</span>
        <span class="s3">.</span><span class="s0">textAlign</span><span class="s5">(</span><span class="s0">TextAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s5">)</span>
        <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s7">'100%'</span><span class="s5">)</span>

      <span class="s0">Divider</span><span class="s5">()</span>
        <span class="s3">.</span><span class="s0">strokeWidth</span><span class="s5">(</span><span class="s6">1</span><span class="s5">)</span>
      <span class="s0">List</span><span class="s5">() </span><span class="s1">{</span>
        <span class="s0">ForEach</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">list</span><span class="s3">, </span><span class="s5">(</span><span class="s0">item</span><span class="s3">: </span><span class="s0">iDatum</span><span class="s3">, </span><span class="s0">index</span><span class="s3">: </span><span class="s0">number</span><span class="s5">) </span><span class="s3">=&gt; </span><span class="s1">{</span>
          <span class="s0">ListItem</span><span class="s5">() </span><span class="s1">{</span>
            <span class="s0">contentList</span><span class="s5">(</span><span class="s1">{</span>
              <span class="s0">item</span><span class="s3">: </span><span class="s0">item</span><span class="s3">, </span><span class="s0">onAdd</span><span class="s3">: </span><span class="s5">() </span><span class="s3">=&gt; </span><span class="s1">{</span>
                <span class="s0">if </span><span class="s5">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">isagreed</span><span class="s5">) </span><span class="s1">{</span>
                  <span class="s0">item</span><span class="s3">.</span><span class="s0">agreeCount</span><span class="s3">--</span>
                  <span class="s0">this</span><span class="s3">.</span><span class="s0">list</span><span class="s3">.</span><span class="s0">splice</span><span class="s5">(</span><span class="s0">index</span><span class="s3">, </span><span class="s6">1</span><span class="s3">, </span><span class="s0">item</span><span class="s5">)</span>
                <span class="s1">} </span><span class="s0">else </span><span class="s1">{</span>
                  <span class="s0">item</span><span class="s3">.</span><span class="s0">agreeCount</span><span class="s3">++</span>
                  <span class="s0">this</span><span class="s3">.</span><span class="s0">list</span><span class="s3">.</span><span class="s0">splice</span><span class="s5">(</span><span class="s0">index</span><span class="s3">, </span><span class="s6">1</span><span class="s3">, </span><span class="s0">item</span><span class="s5">)</span>
                <span class="s1">}</span>
                <span class="s0">item</span><span class="s3">.</span><span class="s0">isagreed </span><span class="s3">= !</span><span class="s0">item</span><span class="s3">.</span><span class="s0">isagreed</span>
              <span class="s1">}</span>
            <span class="s1">}</span><span class="s5">)</span>
          <span class="s1">}</span>
        <span class="s1">}</span><span class="s5">)</span>
      <span class="s1">}</span>
      <span class="s3">.</span><span class="s0">scrollBar</span><span class="s5">(</span><span class="s0">BarState</span><span class="s3">.</span><span class="s0">Off</span><span class="s5">)</span>
    <span class="s1">}</span>
    <span class="s3">.</span><span class="s0">padding</span><span class="s5">(</span><span class="s6">10</span><span class="s5">)</span>
  <span class="s1">}</span>
<span class="s1">}</span>

<span class="s4">@</span><span class="s0">Component</span>
<span class="s0">struct contentList </span><span class="s1">{</span>
  <span class="s4">@</span><span class="s0">Prop item</span><span class="s3">: </span><span class="s0">iDatum</span>
  <span class="s0">onAdd </span><span class="s3">= </span><span class="s5">() </span><span class="s3">=&gt; </span><span class="s1">{</span>

  <span class="s1">}</span>

  <span class="s0">build</span><span class="s5">() </span><span class="s1">{</span>
    <span class="s0">Row</span><span class="s5">() </span><span class="s1">{</span>
      <span class="s0">Image</span><span class="s5">(</span><span class="s0">$r</span><span class="s5">(</span><span class="s7">'app.media.ic_common_send'</span><span class="s5">))</span>
        <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s6">50</span><span class="s5">)</span>
        <span class="s3">.</span><span class="s0">borderRadius</span><span class="s5">(</span><span class="s6">25</span><span class="s5">)</span>
        <span class="s3">.</span><span class="s0">syncLoad</span><span class="s5">(</span><span class="s0">true</span><span class="s5">)</span>

      <span class="s0">Column</span><span class="s5">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s6">5 </span><span class="s1">}</span><span class="s5">) </span><span class="s1">{</span>
        <span class="s0">Text</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">item</span><span class="s3">.</span><span class="s0">username</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">fontSize</span><span class="s5">(</span><span class="s6">13</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">fontColor</span><span class="s5">(</span><span class="s0">Color</span><span class="s3">.</span><span class="s0">Gray</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">textAlign</span><span class="s5">(</span><span class="s0">TextAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s7">'100%'</span><span class="s5">)</span>

        <span class="s0">Text</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">item</span><span class="s3">.</span><span class="s0">content</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">textAlign</span><span class="s5">(</span><span class="s0">TextAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s7">'100%'</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">fontSize</span><span class="s5">(</span><span class="s6">14</span><span class="s5">)</span>

        <span class="s0">Row</span><span class="s5">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s6">15 </span><span class="s1">}</span><span class="s5">) </span><span class="s1">{</span>
          <span class="s0">Text</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">item</span><span class="s3">.</span><span class="s0">time</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">fontSize</span><span class="s5">(</span><span class="s6">13</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">fontColor</span><span class="s5">(</span><span class="s0">Color</span><span class="s3">.</span><span class="s0">Gray</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">textAlign</span><span class="s5">(</span><span class="s0">TextAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s7">'100%'</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s5">(</span><span class="s6">1</span><span class="s5">)</span>

          <span class="s0">Text</span><span class="s5">(</span><span class="s7">`支持(</span><span class="s1">${</span><span class="s0">this</span><span class="s3">.</span><span class="s0">item</span><span class="s3">.</span><span class="s0">agreeCount</span><span class="s1">}</span><span class="s7">)`</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">fontSize</span><span class="s5">(</span><span class="s6">12</span><span class="s5">)</span>
            <span class="s3">.</span><span class="s0">fontColor</span><span class="s5">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">item</span><span class="s3">.</span><span class="s0">isagreed </span><span class="s3">? </span><span class="s0">Color</span><span class="s3">.</span><span class="s0">Green </span><span class="s3">: </span><span class="s0">Color</span><span class="s3">.</span><span class="s0">Gray</span><span class="s5">)</span><span class="s2">// 支持 绿色，未支持 灰色</span>
            <span class="s3">.</span><span class="s0">onClick</span><span class="s5">(() </span><span class="s3">=&gt; </span><span class="s1">{</span>
              <span class="s0">this</span><span class="s3">.</span><span class="s0">onAdd</span><span class="s5">()</span>
            <span class="s1">}</span><span class="s5">)</span>
        <span class="s1">}</span>
        <span class="s3">.</span><span class="s0">margin</span><span class="s5">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s6">10 </span><span class="s1">}</span><span class="s5">)</span>

        <span class="s0">Divider</span><span class="s5">()</span>
          <span class="s3">.</span><span class="s0">strokeWidth</span><span class="s5">(</span><span class="s6">1</span><span class="s5">)</span>
          <span class="s3">.</span><span class="s0">margin</span><span class="s5">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s6">5</span><span class="s3">, </span><span class="s0">bottom</span><span class="s3">: </span><span class="s6">15 </span><span class="s1">}</span><span class="s5">)</span>
      <span class="s1">}</span>
      <span class="s3">.</span><span class="s0">width</span><span class="s5">(</span><span class="s7">'100%'</span><span class="s5">)</span>
      <span class="s3">.</span><span class="s0">padding</span><span class="s5">(</span><span class="s1">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s6">10</span><span class="s3">, </span><span class="s0">right</span><span class="s3">: </span><span class="s6">10 </span><span class="s1">}</span><span class="s5">)</span>
      <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s5">(</span><span class="s6">1</span><span class="s5">)</span>
    <span class="s1">}</span>
    <span class="s3">.</span><span class="s0">alignItems</span><span class="s5">(</span><span class="s0">VerticalAlign</span><span class="s3">.</span><span class="s0">Top</span><span class="s5">)</span>
  <span class="s1">}</span>
<span class="s1">}</span></pre>
</body>
</html>